<style>
  #button-play svg {
    cursor: pointer;
  }
  .video-button {
    display: none;
  }
  
  .twy-video-agot {
    margin-top: 0;
    background-color: #000;
  }
  
  .text-desc-wrapper .play-active .pause {
    display: block;
  }
  
  .text-desc-wrapper .pause-active .play {
    display: block;
  }
</style>
<div class="twy-video-agot scroll_top spaced-section">
 <div class="page-width twy-video-agot-mobile">
  <div class="video_height video_height-wrapper">
    <div class="video-width">
      <div class="video-wrapper">
        <div class="center pc-banner" id="video-ref">
          {% if section.settings.video != blank %}
            {{ section.settings.video }}
          {% endif %}
          <script async src="https://player.vimeo.com/api/player.js"></script>
        </div>
        <div class="video__bg-image">
          {% if section.settings.mobile_video != blank %}
            {{ section.settings.mobile_video }}
          {% endif %}
          <script async src="https://player.vimeo.com/api/player.js"></script>
        </div>
        <div class="text-desc-wrapper">
          <span class="text1">{{ section.settings.text1 }}</span>
          <span class="text2">{{ section.settings.text2 }}</span>
          <span class="text3">{{ section.settings.text3 }}</span>
        </div>
      </div>
    </div>
  </div>
 </div>
</div>

<script>
  $(window).ready(function() {
    var tooSmall = false;
    var controller = null;
    var maxWidth = 991;
  
    if( $(window).width() < maxWidth ) {
      tooSmall = true;
    }
    function initScrollMagic() {
      const VdController = new ScrollMagic.Controller();
      var tl = new TimelineMax();
      tl.fromTo(
        ".video-wrapper",
        1,
        {
          yPercent: '0',
        },
        {
          yPercent: '-15', 
          ease: Linear.easing
        },
      )

      const tenwaysVideo = document.querySelector(".video_height-wrapper");
      let scene4 = new ScrollMagic.Scene({
        duration: '100%',
        triggerElement: tenwaysVideo,
        triggerHook: 0.9
      })
      .setTween(tl)
      .addTo(VdController);
    }

    if( !tooSmall ) {
      initScrollMagic();
    }

    $(window).resize( function() {
      var wWidth = $(window).width();
      if( wWidth < maxWidth ) {
        if( VdController !== null && VdController !== undefined ) {
          VdController = VdController.destroy( true );
        }
      } else if( wWidth >= maxWidth ) {
        if( VdController === null || VdController === undefined ) {
          initScrollMagic();
        }
      }
    });
  })
</script> 

{% schema %}
  {
    "name": "Twy video agot",
    "tag": "section",
    "class": "spaced-section spaced-section--full-width twy-video tenways-video_height element_top",
    "settings": [
      {
        "type": "text",
        "id": "text1",
        "label": "Text1"
      }, {
        "type": "text",
        "id": "text2",
        "label": "Text2"
      },{
        "type": "text",
        "id": "text3",
        "label": "Text3"
      }, {
        "type": "html",
        "id": "video",
        "label": "Video"
      }, {
        "type": "html",
        "id": "mobile_video",
        "label": "mobile video"
      }, {
        "type": "html",
        "id": "icon1",
        "label": "pause Icon1"
      },
      {
        "type": "html",
        "id": "icon2",
        "label": "play Icon2"
      }
    ],
    "presets": [
      {
        "name": "Twy video agot"
      }
    ]
  }
{% endschema %}

